<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1_事件绑定</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">
      <!-- v-on 指令监听事件 -->
      <!-- v-on 可以接受一些内联 JavaScript 语句 -->
      <!-- v-on 指令监听事件：可以内联 JavaScript 语句 -->
      <!-- <button v-on:click="counter += 1">Add 1</button> -->
      <!-- 简写 -->
      <button @click="counter += 1">Add 1</button>
      <p>The button above has been clicked {{ counter }} times.</p>
      <!-- `greet` 是在下面定义的方法名 -->
      <!-- v-on 也可以接受一个方法名或对某个方法的调用。 -->
      <p><button @click="greet">Greet</button></p>
      <!-- 除了直接绑定一个方法，也可以在内联 JavaScript 语句中调用方法 -->
      <p><button @click="say('hi')">Say hi</button></p>
      <p><button @click="say('what')">Say hello</button></p>
    </div>
  </body>

  <script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: "#app",
      data() {
        return {
          counter: 0,
          name: "Vue.js",
        };
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet(event) {
          alert("Hello " + this.name + "!");
          // event 是原生 DOM 事件
          if (event) {
            alert(event.target.tagName);
          }
        },
        say(message, event) {
          alert(message);
        },
      },
    });
  </script>
</html>
